<template>
  <div>
    <get-phone-info v-if="isGetPhoneInfo" pageType="home" @updatePhoneInfo="initMemberInfo"></get-phone-info>
    <apply-result v-if="isApplyResult" :anchorAuth="applyStatus"></apply-result>
    <div
      v-if="isApplyForm"
      class="container anchor-bg"
      :style="'background:#403bbe url(' + fileSpace + '/images/anchor-topbg.jpg) no-repeat top'">        
        <div class="form-box font-color-6">
          <ul class="auth-box">
            <li class="flex v-align-c">
              <label>头像昵称</label>
              <div class="flex-item">
                <div class="flex v-align-c">
                  <img
                    v-if="fileSpace"
                    class="avatar-img mar-r-8"
                    :src="getCustomerId ? memberInfo.avatar : fileSpace + '/images/default-avatar.png'"
                    alt="">
                  <div class="font-16">{{ getNickName }}</div>
                </div>
              </div>
            </li>
            <li class="flex v-align-c">
              <label>手机号</label>
              <div v-if="getPhone" class="flex-item">{{ getPhone }}</div>
              <div v-else class="flex-item">
                <div class="get-phone-btn" @click="getPhoneEls">一键授权</div>
              </div>
            </li>
          </ul>
          <p class="font-11 font-color-9 mar-t-11 pad-l-12 pad-r-12">注：填写账号ID一经审核通过将无法修改，若填写信息有误产生</p>
          <p class="font-11 font-color-9 mar-b-11 mar-l-4 pad-l-30 pad-r-12">损失盖不负责。</p>
          <div class="plant-box">
            <ul class="sel-tab flex v-align-c pad-r-12">
              <li class="font-16 font-color-6 width-50">平台</li>
              <li
                v-for="(item, index) in plantData" :key="index" @click="selPlant(item)"
                class="plant-item flex-item plant-1" :class="'plant-' + item.type">
                <div class="flex flex-center" :class="item.show ? 'active' : ''">
                  <span :style="'background:url(' + fileSpace + '/images/icon-plants.png) no-repeat'"></span>
                </div>
              </li>
            </ul>
            <div class="form-main">
              <ul v-show="currentPlant === 1">
                <li>
                  <div class="flex v-align-c">
                    <label>微信号</label>
                    <div class="flex-item">
                      <input type="text" placeholder="请输入微信号" v-model="wechatForm.infoNo">
                    </div>
                    <div>
                      <div class="flex v-align-c pad-r-12 font-13">
                        <img
                          v-if="fileSpace"
                          class="width-17 height-17 mar-l-6 mar-r-4"
                          :src="fileSpace + '/images/icon-ques.png'"
                          alt="">
                        说明
                      </div>
                    </div>
                  </div>
                  <div class="form-tips-t">
                    <p class="font-11 font-color-9 mar-t-5 pad-l-12 pad-r-12">注：填写正确的微信号否则无法在小程序</p>
                    <p class="font-11 font-color-9 mar-l-4 pad-l-30 pad-r-12">直播中带货</p>
                  </div>
                </li>
                <li>
                  <div class="flex">
                    <label>截图证明</label>
                    <div class="flex-item">
                      <upload-img v-show="wechatFiles.length <= 2" @upLoadSuccess="upLoadWechatSuccess" @upLoadFail="upLoadFail"
                        @uploadDelete="uploadWechatDelete" :showTip=false :uploadFiles="wechatForm.plantImages"
                        pageType="white-s" v-if="isInitDone" :maxLength=2 :count=2></upload-img>
                    </div>
                  </div>
                  <div class="form-tips-t">
                    <p class="font-11 font-color-9 mar-t-5 pad-l-12 pad-r-12">注：上传微信主页的截图证明</p>
                    <p class="font-11 font-color-9 mar-l-4 pad-l-30 pad-r-12">(最多2张每张不能超过5M)</p>
                  </div>
                </li>
              </ul>
              <div v-show="currentPlant === 2">
                <!-- <div v-show="douYinStep === 1">
                  <h2 class="steps-txt">第一步：授权抖音手机号</h2>
                  <div class="steps-1">
                    <p>1.点击下方复制链接按钮</p>
                    <p>2.打开手机浏览器</p>
                    <p>3.在浏览器粘贴网址，授权后回到此页面</p>
                    <p>4.点击已授权成功按钮</p>
                    <input type="text" v-model="douYinAuthUrl">
                    <div class="align-c">
                      <div class="copy-btn flex flex-center" @click="$pt.setClipboardData({data: douYinAuthUrl})">
                        <span>复制链接</span>
                      </div>
                      <div
                        class="auth-txt font-under font-12 font-color-9 pad-t-10"
                        @click="douYinAuthEls">已授权成功，点击这里</div>
                    </div>
                  </div>
                </div> -->
                <div v-show="douYinStep === 1">
                  <!-- <h2 class="steps-txt">第二步：输入抖音UID</h2> -->
                  <div v-show="douyinLayer" class="douyin-layer">
                    <img
                      @click="douyinLayer = false"
                      class="pic-douyin"
                      src="https://veekrayimg.joinsun.vip/images/pic-douyin-1.jpg"/>
                    <div class="douyin-layer-bg" @click="douyinLayer = false"></div>
                  </div>
                  <ul>
                    <li>
                      <div class="flex v-align-c">
                        <label>抖音UID</label>
                        <div class="flex-item">
                          <input type="text" placeholder="请输入抖音UID" v-model="douYinForm.infoNo">
                        </div>
                        <div>
                          <div class="flex v-align-c pad-r-12 font-13" @click="douyinLayer = true">
                            <img
                              v-if="fileSpace"
                              class="width-17 height-17 mar-l-6 mar-r-4"
                              :src="fileSpace + '/images/icon-ques.png'"
                              alt="">
                            说明
                          </div>
                        </div>
                      </div>
                      <div class="form-tips-t">
                        <p class="font-11 font-color-9 mar-t-5 pad-l-12 pad-r-12">注：填写正确的抖音UID否则无法在小程序</p>
                        <p class="font-11 font-color-9 mar-l-4 pad-l-30 pad-r-12">直播中带货</p>
                      </div>
                    </li>
                    <li>
                      <div class="flex">
                        <label>截图证明</label>
                        <div class="flex-item">
                          <upload-img v-show="douYinFiles.length <= 2" @upLoadSuccess="upLoadDouYinSuccess" @upLoadFail="upLoadFail"
                            @uploadDelete="uploadDouYinDelete" :showTip=false :uploadFiles="douYinForm.plantImages"
                            pageType="white-s" v-if="isInitDone" :maxLength=2 :count=2></upload-img>
                        </div>
                      </div>
                      <div class="form-tips-t">
                        <p class="font-11 font-color-9 mar-t-5 pad-l-12 pad-r-12">注：上传抖音设置页的UID的截图证明</p>
                        <p class="font-11 font-color-9 mar-l-4 pad-l-30 pad-r-12">(最多2张每张不能超过5M)</p>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <ul v-show="currentPlant === 3">
                <li>
                  <div class="flex v-align-c">
                    <label>快手号</label>
                    <div class="flex-item">
                      <input type="text" placeholder="请输入快手号" v-model="kuaiShouForm.infoNo">
                    </div>
                    <div>
                      <div class="flex v-align-c pad-r-12 font-13">
                        <img
                          v-if="fileSpace"
                          class="width-17 height-17 mar-l-6 mar-r-4"
                          :src="fileSpace + '/images/icon-ques.png'"
                          alt="">
                        说明
                      </div>
                    </div>
                  </div>
                  <div class="form-tips-t">
                    <p class="font-11 font-color-9 mar-t-5 pad-l-12 pad-r-12">注：填写正确的快手号否则无法在小程序</p>
                    <p class="font-11 font-color-9 mar-l-4 pad-l-30 pad-r-12">直播中带货</p>
                  </div>
                </li>
                <li>
                  <div class="flex">
                    <label>截图证明</label>
                    <div class="flex-item">
                      <upload-img v-show="kuaiShouFiles.length <= 2" @upLoadSuccess="upLoadKuaiShouSuccess" @upLoadFail="upLoadFail"
                        @uploadDelete="uploadKuaiShouDelete" :showTip=false :uploadFiles="kuaiShouForm.plantImages"
                        pageType="white-s" v-if="isInitDone" :maxLength=2 :count=2></upload-img>
                    </div>
                  </div>
                  <div class="form-tips-t">
                    <p class="font-11 font-color-9 mar-t-5 pad-l-12 pad-r-12">注：上传快手主页的截图证明</p>
                    <p class="font-11 font-color-9 mar-l-4 pad-l-30 pad-r-12">(最多2张每张不能超过5M)</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="confirm-btn font-18 font-w" @click="saveEls">确认申请</div>
        </div>
    </div>
  </div>
</template>
<script>
import UploadImg from '@/components/UploadImg'
import GetPhoneInfo from '@/components/GetPhoneInfo'
import ApplyResult from './components/ApplyResult'
import { getMemberInfo } from '@/api/home'
import { saveAnchorApply, listAnchorApply } from '@/api/personal'
export default {
  components: { UploadImg, ApplyResult, GetPhoneInfo },
  data() {
    return {
      applyQueryStatus: null,
      applyStatus: null,
      memberInfo: {},
      anchorForm: {},
      isApplyForm: true,
      isApplyResult: false,
      paramsQuery: {
        applyType: 1,
        applyStatus: '',
        memberId: '',
        wechatNo: '',
        memberShopId: ''
      },
      // 微信参数
      wechatForm: {
        infoNo: '',
        plantImages: []
      },
      wechatFiles: [],
      isUploadWechatFinish: false,
      // 抖音参数
      douYinForm: {
        infoNo: '',
        plantImages: []
      },
      douYinFiles: [],
      isUploadDouYinFinish: false,
      // 快手参数
      kuaiShouForm: {
        infoNo: '',
        plantImages: []
      },
      kuaiShouFiles: [],
      isUploadKuaiShouFinish: false,
      uploadNum: 0,
      isInitDone: false,
      submitted: false,
      plantData: [],
      currentPlant: null,
      isGetPhoneInfo: false,
      douYinStep: 1,
      douYinAuthUrl: 'https://tower.im/teams/7788112432.html',
      douyinLayer: false
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  // 监听上传是否完成
  watch: {
    isUploadWechatFinish(val) {
      if (this.isUploadWechatFinish) {
        this.doSave()
      }
    },
    isUploadDouYinFinish(val) {
      if (this.isUploadDouYinFinish) {
        this.doSave()
      }
    },
    isUploadKuaiShouFinish(val) {
      if (this.isUploadKuaiShouFinish) {
        this.doSave()
      }
    }
  },
  onShow() {
    this.applyQueryStatus = Number(this.getCurrentPage().query.applyStatus)
  },
  mounted() {
    this.isUploadWechatFinish = false
    this.isUploadDouYinFinish = false
    this.isUploadKuaiShouFinish = false
    this.getMemberInfo()
    this.$pt.setNavigationBarTitle({
      title: '主播申请'
    })
    this.isInitDone = true
    this.plantData = [
      {name: '微信', type: 1, show: true}
    ]
    // this.plantData = [
    //   {name: '微信', type: 1, show: true},
    //   {name: '抖音', type: 2, show: false},
    //   {name: '快手', type: 3, show: false}
    // ]
    this.currentPlant = 1
  },
  methods: {
    getPhoneEls() {
      this.isGetPhoneInfo = false
      setTimeout(() => {
        this.isGetPhoneInfo = true
      }, 100)
    },
    initMemberInfo() {
      this.isGetPhoneInfo = false
    },
    selPlant(item) {
      this.plantData.forEach(item => {
        item.show = false
      })
      item.show = !item.show
      this.currentPlant = item.type
    },
    // 微信申请开始
    upLoadWechatSuccess(res) {
      console.log(res)
      this.wechatFiles = res.files
    },
    uploadWechatDelete(res) {
      this.wechatFiles = res.files
    },
    doWechatUpload() {
      const that = this
      let index = 0
      let finishCount = 0
      if (this.wechatFiles.length === 0) {
        that.isUploadWechatFinish = true
      }
      this.wechatFiles.forEach(file => {
        if (index === 0) {
          // 数组重新计算
          that.wechatForm.plantImages = []
        }
        index++
        // 使用微信上传（只能单张上传）
        const uploadTask = that.$pt.uploadFile({
          url: process.env.BASE_API + '/common/uploadFiles',
          filePath: file,
          name: 'files',
          success(res) {
            const result = JSON.parse(res.data)
            if (result.statusCode >= 400) {
              finishCount--
              that.$pt.hideToast()
              return
            }
            if (result.code === 101) {
              that.wechatForm.plantImages.push(result.data[0])
            } else {
              that.$utils.showToast({ title: '图片上传发生错误:' + result.msg })
              finishCount--
              setTimeout(() => {
                that.$pt.hideToast()
              }, 3000)
            }
          },
          fail() {
            // that.$pt.hideToast()
            // 网络图片会直接fail
            that.wechatForm.plantImages.push(file)
          },
          complete(res) {
            if (res.statusCode >= 400 && res.statusCode !== 504) {
              that.$utils.showToast({ title: '当前网络不可用，请检查你的网络设置（' + res.statusCode + '）' })
              setTimeout(() => {
                that.$pt.hideToast()
              }, 800)
              return
            }
            if (res.statusCode === 504) {
              that.$utils.showToast({ title: '网络异常，请稍后再试（' + res.statusCode + '）' })
              setTimeout(() => {
                that.$pt.hideToast()
              }, 800)
              return
            }
            finishCount++
            // console.log('wechatFiles', that.wechatFiles.length, finishCount)
            if (that.wechatFiles.length === finishCount) {
              that.isUploadWechatFinish = true
            }
          }
        })
        uploadTask.onProgressUpdate((res) => {
          console.log('上传进度', res.progress)
        })
      })
    },
    // 微信申请结束
    // 抖音申请开始
    upLoadDouYinSuccess(res) {
      console.log(res)
      this.currentPlant = 2
      this.plantData.forEach(item => {
        item.show = false
      })
      this.plantData[1].show = true
      this.douYinFiles = res.files
    },
    uploadDouYinDelete(res) {
      this.douYinFiles = res.files
    },
    doDouYinUpload() {
      const that = this
      let index = 0
      let finishCount = 0
      if (this.douYinFiles.length === 0) {
        that.isUploadDouYinFinish = true
      }
      this.douYinFiles.forEach(file => {
        if (index === 0) {
          // 数组重新计算
          that.douYinForm.plantImages = []
        }
        index++
        // 使用微信上传（只能单张上传）
        const uploadTask = that.$pt.uploadFile({
          url: process.env.BASE_API + '/common/uploadFiles',
          filePath: file,
          name: 'files',
          success(res) {
            const result = JSON.parse(res.data)
            if (result.statusCode >= 400) {
              finishCount--
              that.$pt.hideToast()
              return
            }
            if (result.code === 101) {
              that.douYinForm.plantImages.push(result.data[0])
            } else {
              that.$utils.showToast({ title: '图片上传发生错误:' + result.msg })
              finishCount--
              setTimeout(() => {
                that.$pt.hideToast()
              }, 3000)
            }
          },
          fail() {
            // that.$pt.hideToast()
            // 网络图片会直接fail
            that.douYinForm.plantImages.push(file)
          },
          complete(res) {
            if (res.statusCode >= 400 && res.statusCode !== 504) {
              that.$utils.showToast({ title: '当前网络不可用，请检查你的网络设置（' + res.statusCode + '）' })
              setTimeout(() => {
                that.$pt.hideToast()
              }, 800)
              return
            }
            if (res.statusCode === 504) {
              that.$utils.showToast({ title: '网络异常，请稍后再试（' + res.statusCode + '）' })
              setTimeout(() => {
                that.$pt.hideToast()
              }, 800)
              return
            }
            finishCount++
            if (that.douYinFiles.length === finishCount) {
              that.isUploadDouYinFinish = true
            }
          }
        })
        uploadTask.onProgressUpdate((res) => {
          console.log('上传进度', res.progress)
        })
      })
    },
    // 抖音申请结束
    // 快手申请开始
    upLoadKuaiShouSuccess(res) {
      console.log(res)
      this.currentPlant = 3
      this.plantData.forEach(item => {
        item.show = false
      })
      this.plantData[2].show = true
      this.kuaiShouFiles = res.files
    },
    uploadKuaiShouDelete(res) {
      this.kuaiShouFiles = res.files
    },
    doKuaiShouUpload() {
      const that = this
      let index = 0
      let finishCount = 0
      if (this.kuaiShouFiles.length === 0) {
        that.isUploadKuaiShouFinish = true
      }
      this.kuaiShouFiles.forEach(file => {
        if (index === 0) {
          // 数组重新计算
          that.kuaiShouForm.plantImages = []
        }
        index++
        // 使用微信上传（只能单张上传）
        const uploadTask = that.$pt.uploadFile({
          url: process.env.BASE_API + '/common/uploadFiles',
          filePath: file,
          name: 'files',
          success(res) {
            const result = JSON.parse(res.data)
            if (result.statusCode >= 400) {
              finishCount--
              that.$pt.hideToast()
              return
            }
            if (result.code === 101) {
              that.kuaiShouForm.plantImages.push(result.data[0])
            } else {
              that.$utils.showToast({ title: '图片上传发生错误:' + result.msg })
              finishCount--
              setTimeout(() => {
                that.$pt.hideToast()
              }, 3000)
            }
          },
          fail() {
            // that.$pt.hideToast()
            // 网络图片会直接fail
            that.kuaiShouForm.plantImages.push(file)
          },
          complete(res) {
            if (res.statusCode >= 400 && res.statusCode !== 504) {
              that.$utils.showToast({ title: '当前网络不可用，请检查你的网络设置（' + res.statusCode + '）' })
              setTimeout(() => {
                that.$pt.hideToast()
              }, 800)
              return
            }
            if (res.statusCode === 504) {
              that.$utils.showToast({ title: '网络异常，请稍后再试（' + res.statusCode + '）' })
              setTimeout(() => {
                that.$pt.hideToast()
              }, 800)
              return
            }
            finishCount++
            if (that.kuaiShouFiles.length === finishCount) {
              that.isUploadKuaiShouFinish = true
            }
          }
        })
        uploadTask.onProgressUpdate((res) => {
          console.log('上传进度', res.progress)
        })
      })
    },
    // 快手申请结束
    saveEls() {
      this.isUploadWechatFinish = false
      this.isUploadDouYinFinish = false
      this.isUploadKuaiShouFinish = false
      this.doSave()
    },
    doSave() {
      if (!this.getPhone) return this.$utils.showToast({ title: '请先授权手机号码' })
      if (this.wechatForm.infoNo || this.wechatFiles.length) {
        if (!this.wechatForm.infoNo) return this.$utils.showToast({ title: '请输入微信号' })
        if (!this.wechatFiles.length) return this.$utils.showToast({ title: '请选择微信截图证明' })
      }
      if (this.douYinForm.infoNo || this.douYinFiles.length) {
        if (!this.douYinForm.infoNo) return this.$utils.showToast({ title: '请输入抖音号' })
        if (!this.douYinFiles.length) return this.$utils.showToast({ title: '请选择抖音截图证明' })
      }
      if (this.kuaiShouForm.infoNo || this.kuaiShouFiles.length) {
        if (!this.kuaiShouForm.infoNo) return this.$utils.showToast({ title: '请输入快手号' })
        if (!this.kuaiShouFiles.length) return this.$utils.showToast({ title: '请选择快手截图证明' })
      }
      console.log('doSave', this.isUploadWechatFinish, this.isUploadDouYinFinish, this.isUploadKuaiShouFinish)
      if (!this.isUploadWechatFinish && !this.isUploadDouYinFinish && !this.isUploadKuaiShouFinish) {
        // 开始上传文件
        this.$utils.showToast({
          title: '图片上传中',
          icon: 'loading',
          duration: 150000,
          mask: true
        })
        if (this.wechatFiles.length) {
          this.doWechatUpload()
        }
        if (this.douYinFiles.length) {
          this.doDouYinUpload()
        }
        if (this.kuaiShouFiles.length) {
          this.doKuaiShouUpload()
        }
      } else {
        // console.log('wechatFile 11', this.wechatFiles)
        // console.log('douYinFiles 11', this.douYinFiles)
        // console.log('kuaiShouFiles 11', this.kuaiShouFiles)
        // console.log('wechatForm 11', this.wechatForm)
        // console.log('douYinForm 11', this.douYinForm)
        // console.log('kuaiShouForm 11', this.kuaiShouForm)
        // console.log('save 保存事件前')
        this.isUploadWechatFinish = false
        this.isUploadDouYinFinish = false
        this.isUploadKuaiShouFinish = false
        // 上传完成，清除数据
        // 防止重复提交
        this.$pt.hideToast()
        if (this.submitted) return
        this.submitted = true
        this.saveAnchorApply()
      }
    },
    checkEls() {
    },
    saveAnchorApply() {
      console.log('saveAnchorApply', this.isUploadWechatFinish, this.isUploadDouYinFinish, this.isUploadKuaiShouFinish)
      let paramsQuery = {
        anchorApplyList: []
      }
      // applyType（申请类型 1：总部招募码 2：一级合伙人招募  3：二级合伙人招募 4：招募员招募 5：云店店主招募码 6：主播小程序）
      // relationPlatform (关联平台 1：微信 2：抖音 3：快手)
      // 微信数据提交
      if (this.wechatForm.infoNo) {
        if (!this.wechatForm.plantImages.length) return this.$utils.showToast({ title: '微信截图证明上传失败！', duration: 5000 })
        paramsQuery.anchorApplyList.push({
          anchorApplyId: '',
          applyType: 1,
          memberId: this.getCustomerId,
          partnerId: '',
          recruiterId: '',
          memberShopId: this.getMemberId,
          relationPlatform: 1,
          relationNo: this.wechatForm.infoNo,
          applyImageList: this.wechatForm.plantImages
        })
      }
      // 抖音数据提交
      if (this.douYinForm.infoNo) {
        if (!this.douYinForm.plantImages.length) return this.$utils.showToast({ title: '抖音截图证明上传失败！', duration: 5000 })
        paramsQuery.anchorApplyList.push({
          anchorApplyId: '',
          applyType: 1,
          memberId: this.getCustomerId,
          partnerId: '',
          recruiterId: '',
          memberShopId: this.getMemberId,
          relationPlatform: 2,
          relationNo: this.douYinForm.infoNo,
          applyImageList: this.douYinForm.plantImages
        })
      }
      // 快手数据提交
      if (this.kuaiShouForm.infoNo) {
        if (!this.kuaiShouForm.plantImages.length) return this.$utils.showToast({ title: '快手截图证明上传失败！', duration: 5000 })
        paramsQuery.anchorApplyList.push({
          anchorApplyId: '',
          applyType: 1,
          memberId: this.getCustomerId,
          partnerId: '',
          recruiterId: '',
          memberShopId: this.getMemberId,
          relationPlatform: 3,
          relationNo: this.kuaiShouForm.infoNo,
          applyImageList: this.kuaiShouForm.plantImages
        })
      }
      // console.log(paramsQuery.anchorApplyList)
      saveAnchorApply(paramsQuery).then((response) => {
        if (response.isError) return
        this.listAnchorApply()
      })
    },
    douYinAuthEls() {
      this.$utils.showToast({
        title: '加载中',
        icon: 'loading'
      })
      listAnchorApply({
        memberId: this.getCustomerId
      }).then((response) => {
        if (response.isError) return
        this.$pt.hideToast()
        this.douYinStep = 2
      })
    },
    listAnchorApply() {
      this.isApplyForm = false
      this.isApplyResult = false
      this.$utils.showToast({
        title: '加载中',
        icon: 'loading'
      })
      listAnchorApply({
        memberId: this.getCustomerId
      }).then((response) => {
        if (response.isError) return
        this.applyStatus = response.data.applyStatus
        // this.applyStatus = 2
        // '申请状态: -1 未申请;  0 待审核;  1 审核通过;  2审核未通过;'
        if (this.applyStatus === -1) {
          // 未申请主播
          this.$pt.hideToast()
          this.isApplyForm = true
          this.$pt.setNavigationBarTitle({
            title: '主播申请'
          })
        } else {
          this.isApplyResult = false
          setTimeout(() => {
            this.$pt.hideToast()
            this.isApplyResult = true
          }, 100)
        }
      })
    },
    getMemberInfo() {
      getMemberInfo(this.getCustomerId).then((response) => {
        if (response.isError) return
        this.memberInfo = response.data
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  min-height: calc(100vh - 144px);
  &.anchor-bg{
    background-size: 375px 207px!important;
    padding-top: 144px;
    padding-bottom: 20px;
  }
  .douyin-layer{
    position: fixed;
    left: 0;
    top: 30%;
    width: 100%;
    height: 100%;
    z-index: 10;
    .douyin-layer-bg{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 11;
      background: rgba(0, 0, 0, 0.5);
    }
  }
  .pic-douyin{
    width: 375px;
    height: 222px;
    position: relative;
    z-index: 12;
    border: #fff 3px solid;
    box-sizing: border-box;
  }
  .form-box{
    background: #fff;
    border-radius: 10px;
    margin: 0 15px;
    padding-bottom: 32px;
    ul.auth-box{
      li{
        border-bottom: #fafafa 2px solid;
        padding: 10px 12px;
        label{
          margin-right: 9px;          
        }
        .avatar-img{
          width: 30px;
          height: 30px;
          border-radius: 50px;
        }
        .get-phone-btn{
          background: #f1f0ff;
          color: #736DFF;
          border-radius: 50px;
          font-size: 12px;
          padding: 0 8px;
          height: 24px;
          line-height: 24px;
          float: right;
        }
      }
    }
    .plant-box{
      border-top: #f7f9fb 5px solid;
      padding: 10px 12px;
      .form-main{
        background: #f7f9fb;
        border-radius: 10px;
        padding: 17px 10px;
        margin-top: 15px;
        .steps-txt{
          font-size: 16px;
          padding: 0 6px 14px 6px;
        }
        .steps-1{
          p{
            color: #999;
            font-size: 13px;
            margin-left: 29px;
            line-height: 1.6;
          }
          input{
            color: #333;
            background: #f7f9fb;
            border:#e9eaea 1px solid;
            border-radius: 5px;
            width: 218px;
            padding: 0 10px;
            margin: 16px auto 18px auto;
            font-size: 13px;
          }
          .copy-btn{
            background: #f1f0ff;
            color: #7427FF;
            font-size: 13px;
            padding: 0 32px;
            height: 34px;
            border-radius: 50px;
          }
        }
        li{
          padding-bottom: 15px;
          &:last-child{
            padding-bottom: 0;
          }
          label{
            font-size: 16px;
            margin-right: 10px;
            min-width: 70px;
            text-align: right;
            display: block;
          }
          input{
            background: #fff;
            border-radius: 5px;
            padding: 0 9px;
            font-size: 13px;
          }
          .form-tips-t{
            padding-left: 70px;
          }
        }
      }
      .sel-tab{
        .plant-item{          
          .active{
            box-shadow: 0px 3px 5px 0px rgba(181, 181, 181, 0.32);
            border-radius: 5px;
            &:after{
              content: '';
              display: block;
              position: absolute;
              left: 50%;
              bottom: -15px;
              margin-left: -6px;
              width:0;
              height:0;
              border-right:6px solid transparent;
              border-left:6px solid transparent;
              border-bottom:6px solid #f7f9fb;
            }
          }
          &.plant-2{
            div{
              span{
                background-position: -24px 0!important;
              }
            }
          }
          &.plant-3{
            div{
              span{
                background-position: -48px 0!important;
              }
            }
          }
          div{
            height: 48px;
            width: 48px;
            position: relative;
            z-index: 10;
            span{
              height: 22px;
              width: 22px;
              display: block;
              background-size: 70px 22px!important;
            }
          }
        }
      }
    }
    .confirm-btn{
      background: #ffe100;
      color: #333;
      border-radius: 100px;
      text-align: center;
      height: 44px;
      line-height: 44px;
      margin: 16px 25px 0 25px;
    }
  }
}
</style>
